import React, { FC, useRef, useState } from "react";
import { Button, message } from 'antd'
import { css, cx } from '@emotion/css'
import text_file from '@/assets/text-file.svg';
interface Upload {
  value?: File,
  onChange?: (file: File) => void
}

function verityFlieType(file: File): boolean {
  if (!/.(zip)|(txt)$/.test(file.name)) {
    message.error('只能上传 .zip 或 .txt 格式的文件!');
    return false;
  }
  // if (file.size / 1024 > 300) {
  //   Message.error('文件不能超过 300KB!');
  //   return false;
  // }
  return true;
}


const Uploaded: FC<Upload> = (prpos) => {
  const { onChange, value } = prpos
  // console.log('prop', prpos)
  const [fileName, setFileName] = useState(value?.name);
  const inputRef = useRef<HTMLInputElement>(null);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e);
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    // e.stopPropagation();
    //drop 事件触发默认会打开文(图片文本链接pds)，如果不想需要禁止默认事件，
    const file = e.dataTransfer.files[0];

    if (!file) return;
    if (!verityFlieType(file)) {
      return
    }
    setFileName(file.name);
    onChange?.(file);
  }
  const handleInputClick = (e: React.MouseEvent) => {
    (e.target as HTMLInputElement).value = ''
  }
  const handleDropover = (e: React.DragEvent) => {
    // 默认地，无法将数据或者元素放置到其他元素中。如果需要设置允许放置(drop起作用)，我们必须阻止对元素的默认处理方式
    e.preventDefault();
    // e.stopPropagation();
  }

  const handleOnClick = () => {
    inputRef.current?.click()
  }
  return (
    <div
      className={css`
      .input-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 162px;
        margin-top: 8px;
        background-color: #f6f7fb;
        border: 1px dashed #e5e8ef;
        border-radius: 2px;
        color: black;
        font-size: 12px;
      }
    `}
    >
      <input type='file' ref={inputRef} accept=".txt,.zip" style={{ display: 'none' }} onClick={handleInputClick} onChange={handleChange}></input>
      {
        fileName
          ?
          (<div
            className={cx('input-block', css`
              img {
                width: 30px;
                margin-bottom: 10px;
              }
              button {
                margin-top: 11px;
                background-color: white;
                box-sizing: border-box;
                width: 80px;
                height: 28px;
                border: 1px solid #e5e8ef;
                border-radius: 2px;
                font-size: 12px;
                cursor: pointer;
              }
            `
            )}>
            <img src={text_file} alt="text file icon" />
            <div>{fileName}</div>
            <button onClick={handleOnClick}>重新上传</button>
          </div>)
          :
          (<div

            className={cx('input-block', css`
                cursor: pointer;
                svg {
                  margin - bottom: 15px;
                  color: #86909c;
                  font - size: 16px;
                }
          `)}
            onDrop={handleDrop}
            onDragOver={handleDropover}
            onClick={handleOnClick}
          >
            {/* <IconPlus /> */}
            <div style={{ color: '#1D2129', fontWeight: 500, fontSize: 14 }}>点击或拖拽文件到此处上传</div>
            <div style={{ color: '#86909C' }}>支持格式 .zip .txt</div>
          </div>)
      }
    </div>)
}

export default Uploaded; 